<template>
  <chart :auto-resize="true" :options="options"></chart>
</template>

<script>
export default {
  data() {
    return {
      options: {
        tooltip: {
          trigger: "item",
          formatter: " <br/>{b}: {c} ({d}%)",
        },

        title: {
          text: `92%`,
          left: "center",
          top: "40%", //top待调整
          textStyle: {
            color: "#48EAFF",
            fontSize: 19,
            fontFamily: "YouSheBiaoTiHei",
          },
        },
        graphic: {
          type: "text",
          left: "center",
          top: "57%",
          style: {
            text: "在岗率",
            fill: "#fff",
            fontSize: 10,
          },
        },
        legend: [
          {
            orient: "horizontal",
            left: 50,
            bottom: 0,
            data: ["在岗"],
            textStyle: {
              color: ["#1d54f7"],
            },
          },
          {
            orient: "horizontal",
            right: 40,
            bottom: 0,
            data: ["未在岗"],
            textStyle: {
              color: ["#FBFF2B"],
            },
          },
        ],

        series: [
          {
            // name: '访问来源',
            type: "pie",
            radius: ["60%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "left",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                // fontWeight: "bold",
                color: "#2769f7",
              },
            },

            data: [
              {
                value: 46,
                name: "在岗",
                itemStyle: {
                  normal: {
                    borderWidth: 8,
                    borderColor: {
                      colorStops: [
                        {
                          offset: 0,
                          color: "#3D84FF" || "#3D84FF", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#3D84FF" || "#3D84FF", // 100% 处的颜色
                        },
                      ],
                    },
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#3D84FF" || "#3D84FF", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#3D84FF" || "#3D84FF", // 100% 处的颜色
                        },
                      ],
                    },
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                value: 4,
                name: "未在岗",
                itemStyle: {
                  normal: {
                    borderWidth: 8,
                    borderColor: {
                      colorStops: [
                        {
                          offset: 0,
                          //   黄
                          color: "#eef851" || "#00cefc", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          //   蓝色
                          color: "#68eaf9" || "#367bec", // 100% 处的颜色
                        },
                      ],
                    },
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          //   黄色
                          color: "#eef851" || "#00cefc", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          //   蓝色
                          color: "#68eaf9" || "#367bec", // 100% 处的颜色
                        },
                      ],
                    },
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
            ],
          },
        ],
      },
    };
  },
};
</script>
